<script lang="js" setup>
import { ref } from "vue"
import { useRouter } from 'vue-router'
const Router = useRouter()

// 父组件传第过来的模块标题和书籍数据
const props = defineProps({
    title: {
        type: String,
        require: true,
        default: "默认标题"
    },
    books: {
        type: Array,
        require: true,
        default: [1, 2, 3, 4, 5, 6, 7, 8]
    }
});

const rate = ref(4)

// 点击书籍进入详情页
const goDetail = () => {
    Router.push({
        path: '/detail'
    })
}

</script>

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>我的书籍</span>
            </div>
        </template>
        <div class="recommend">
            <div class="books">
                <div class="bgbook" @click="goDetail()">
                    <img src="/cover.jpg" alt="" class="cover">
                    <span style="font-size: 24px;text-align: left;width: 80%;font-weight: bolder;">剑来</span>
                    <span style="font-size: 20px;text-align: left;width: 80%;font-weight: bold;">李佳强</span>
                    <el-rate v-model="rate" allow-half disabled />
                    <p style="font-size: 14px;color: #ccc;text-align: left;width: 80%;">5人看过</p>
                </div>
                <div class="right">
                    <div class="book" v-for="i in books" @click="goDetail()">
                        <img src="/cover.jpg" alt="" class="cover">
                        <span style="font-size: 20px;text-align: left;width: 80%;font-weight: bolder;">剑来 <i
                                style="font-size: 14px;color: #ccc;text-align: left;">vue</i></span>
                        <el-rate v-model="rate" allow-half disabled />
                        <p style="font-size: 14px;color: #ccc;text-align: left;width: 80%;">5人看过</p>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
.recommend {
    width: 100%;
    height: 100%;
    // background-color: pink;
    margin: 20px auto;

    .books {
        width:100%;
        height: 84%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        overflow: auto;

        .bgbook {
            width: 200px;
            height: 400px;
            margin: 0 auto;
            background-color: #fff;
            // border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .cover {
                width: 90%;
            }
        }

        .right {
            width: 800px;
            height: 400px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
            // background-color: #fff;


            .book {
                margin: 5px;
                width: 160px;
                height: 220px;
                background-color: #fff;
                // border: 1px solid black;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: column;

                .cover {
                    width: 75%;
                }
            }
        }

    }
}
</style>